<template>
  <div>
    <div>
      <page-title title="已审核订单(详情)"  home-path="/center/home"></page-title>
    </div>
    <div class="pageMain">
      <el-button-group
        style="
          display: flex;
          justify-content: center;
          margin-bottom: 20px;
          padding-top: 10px;
        "
      >
        <el-button
          :type="activeTab === 'details' ? 'primary' : ''"
          size="small"
          @click="setActiveTab('details')"
          >详情</el-button
        >
        <el-button
          :type="activeTab === 'workflow' ? 'primary' : ''"
          size="small"
          @click="setActiveTab('workflow')"
          >流程</el-button
        >
      </el-button-group>
      <div v-if="activeTab == 'details'" class="detail">
        <detail-and-progress
          :form-data="formData"
          :order-details="orderDetails"
          :suggest="suggestion">
        </detail-and-progress>
      </div>
      <div v-else>
        <Process :process-form="processForm"></Process>
      </div>
    </div>
  </div>
</template>

<script>
import detailAndProgress from "@/components/detailAndProgress.vue";
import Process from "@/components/Process.vue";
import PageTitle from "@/components/PageTitle.vue";
import { post } from "@/lib/Util.js";
import {
  getReviewedLeftList,
  getDirectorOpinion,
  getReviewerOpinion,
  technologicalProcessData
} from "@/lib/Api.js";
export default {
  components: {
    PageTitle,
    detailAndProgress,
    Process
  },
  data() {
    return {
      orderDetails: {},
      processForm: {
        sale: "",
        standard: "",
        center: "",
        standardDepartment: "",
        file: ""
      },
      activeTab: "details",
      formData: {},
      fromPath: "",
      sharedId: "",
      suggestion: {}
    };
  },
  created() {
    this.sharedId = this.$route.params.id;
  },
  mounted() {
    this.getTableData();
    this.getDirectorsOpinion();
    this.getReviewersOpinion();
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      console.log(from, "from");
      vm.fromPath = from.path;
    });
  },
  methods: {
    //切换按钮
    setActiveTab(tab) {
      this.activeTab = tab; // 设置当前活动的标签
      if (tab == "workflow") {
        this.getWorkFlowData();
      }
    },
    //获取左侧表格数据
    getTableData() {
      let data = {
        contractInfoId: this.sharedId
      };
      post(getReviewedLeftList, data).then(res => {
        if (res.code == 200) {
          this.formData = res.data;
        }
      });
    },
    //获取主任意见信息
    getDirectorsOpinion() {
      post(getDirectorOpinion, { id: this.sharedId }).then(res => {
        if (res.code == 200) {
          console.log("主任意见===", res);
          this.suggestion = res.data;
        }
      });
    },
    //获取评审人员意见
    getReviewersOpinion() {
      let data = {
        id: this.sharedId
      };
      post(getReviewerOpinion, data).then(res => {
        if (res.code == 200) {
          this.orderDetails = res.data;
        }
      });
    },
    //获取流程信息
    getWorkFlowData() {
      let data = {
        contractInfoId: this.sharedId
      };
      post(technologicalProcessData, data).then(res => {
        if (res.code == 200) {
          this.processForm = res.data;
          this.processForm.sale = res.data.flowInfoList.filter(
            item => item.sequenceNo == 1
          )[0];
          this.processForm.standard = res.data.flowInfoList.filter(
            item => item.sequenceNo == 2
          )[0];
          this.processForm.center = res.data.flowInfoList.filter(
            item => item.sequenceNo == 3
          )[0];
          this.processForm.standardDepartment = res.data.flowInfoList.filter(
            item => item.sequenceNo == 4
          )[0];
          this.processForm.file = res.data.flowInfoList.filter(
            item => item.sequenceNo == 5
          )[0];
          //  this.flowForm.standard = res.data.flowInfoList.filter(item =>item.isSubmit==0)
          // console.log(this.processForm.sale);
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.uTable {
  width: 500px;
  td {
    &:first-child {
      width: 180px;
    }
  }
}
.vertical-line {
  width: 2px;
  height: 100%;
  background-color: #ccc;
  margin: 0 10px;
  /* 垂直分割线外边距 */
}
.container {
  display: flex;
  align-items: stretch;
  height: 100%;
}
.left-half {
  flex: 1;
  padding: 10px;
  margin: 30px 30px;
}
.right-half {
  flex: 1;
  padding: 10px;
  margin: 10px 30px;
}
.majorCategories {
  margin-bottom: 30px;
  width: 80%;
}
.pageMain-title {
  width: 80%;
  margin: auto;
}
</style>
